<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        input{
            width: 300px;
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="text" v-model='title' placeholder="请输入图书名称">
        <button @click='add'>添加</button>
        <h3 class="text-center text-info">图书管理系统</h3>
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>书名</th>
                    <th>添加时间</th>
                    <th>操作</th>
                   
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" key:item.id>
                    <td>{{index+1}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.time}}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(index)">删除</button>
                    </td>

    </div>
    <script src="./js/vue.js"></script>
    <script>
             const vm = new Vue({
                 el:'#app',
                 data:{
                     id:'',
                    arr: [
                    {
                        
                        title:"三国演义",
                        time:"2021-1-28",
                    },
                    {
                        
                        title:"红楼梦",
                        time:"2021-1-28",
                    },
                    {
                        
                        title:"水浒传",
                        time:"2021-1-28",
                    },
                    {
                       
                        title:"西游记",
                        time:"2021-1-28",
                    },
                ]
                    
                 },
                 methods: {
                     //添加
                     add(){
                        this.arr.push({
                        title: this.title,
                        // id: this.id,
                        time: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString()
                    })
                     },
                     //删除
                     del(index) {
                    this.arr.splice(index, 1)
                },
                 },
             })
    </script>
</body>
</html>